<template>
  <view class="collect-page" :style="my_style">
    <!-- 收藏列表 -->
    <view class="u-p-30">
      <common-list @load="getGoodsCollectList" :list="list" :status="status">
        <template #list>
          <row-item :list="list" type="collect" @cancel="setGoodsCollection"> </row-item>
        </template>
        <template #empty>
          <empty text="收藏列表空空如也～"></empty>
        </template>
      </common-list>
    </view>
  </view>
</template>

<script>
  import RowItem from '@/components/goods/RowItem.vue'
  export default {
    data() {
      return {
        page: 1,
        list: [],
        status: 'loading',
      }
    },
    components: {
      RowItem,
    },
    onLoad(options) {
      this.getGoodsCollectList()
    },
    methods: {
      /**
       * 用户收藏商品列表
       */
      async getGoodsCollectList() {
        const { page, limit } = this
        let params = {
          page,
          limit,
        }
        this.status = 'loading'
        const res = await this.$api.common.goods('getGoodsCollectList', params)
        if (res.code === 200) {
          const { count, list } = res.data
          this.list = [...this.list, ...list]
          if (this.list.length >= count) {
            // 所有数据加载完毕
            this.status = 'nomore'
            return
          }
          // 单次请求数据完毕
          this.status = 'loadmore'
          this.page = this.page + 1
        }
      },
      /**
       * 商品收藏/取消收藏
       */
      async setGoodsCollection(val) {
        console.log(val)
        // 1收藏 0 取消
        let params = {
          goods_id: val.goods_id,
          action: 0,
        }
        const { code, message } = await this.$api.common.goods('setGoodsCollection', params)
        if (code === 200) {
          this.list.splice(val.index, 1)
          this.showMsg(message)
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
